<template>
  <div class="board-url__panel">
    <div class="board-url__image">
      <el-image :src="data.thumbnail" fit="contain" :preview-src-list="[data.thumbnail]" />
      <div class="board-url__collect">
        <svg-icon icon-class="star" @click="collect('1', data)"
          :class="data.collectFlag ? 'board-url__star--active' : ''"></svg-icon>
        <div class="board-url__eye">
          <svg-icon icon-class="eye_open_1"></svg-icon> {{ formatNumber(data.clickNum) }}
        </div>
      </div>
    </div>
    <div class="board-url__content">
      <div class="board-url__meta">
        <span v-if="data.category">
          {{ dims.RESOURCE_CATEGORY[data.category] }}
        </span>
        <span v-if="data.type">
          <svg-icon icon-class="arrow_drop_right" />{{ dims.RESOURCE_TYPE[data.type] }}
        </span>
      </div>
      <div class="board-url__title">
        {{ data.name }}
      </div>
      <div class="board-url__description">
        <div class="board-url__note">{{ data.note }}</div>
        <div class="board-url__tags">
          <svg-icon icon-class="price_tag" /> {{ data.tags }}
        </div>
      </div>
      <div class="board-url__actions">
        <div class="board-url__action" @click="sa.go(data.url)">
          <p class="board-url__action-text">直 达</p>
          <svg-icon icon-class="right_circle_line" />
        </div>
        <div class="board-url__action" @click="sa.scan()">
          <p class="board-url__action-text">扫 码</p>
          <svg-icon icon-class="qrscan"></svg-icon>
        </div>
        <svg-icon icon-class="alarm_warning" class="board-url__feedback" @click="feedback(data.id)"></svg-icon>
      </div>
    </div>
  </div>
</template>

<script>
import collect from '@/mixins/rsr-collect';
import mutiLine from '@/mixins/text-line';
import numberFunc from '@/mixins/number';
export default {
  name: 'board-url',
  props: {
    id: String
  },
  mixins: [collect, mutiLine, numberFunc],
  data() {
    return {
      data: {},
      dims: sa.$sys.getCurd(),
    }
  },
  created() {
    this.getResource()
  },
  methods: {
    getResource() {
      sa.ajax('/rsr/getResourceById', {
        id: this.id
      }, (res) => {
        if (res.code === 200) {
          this.data = res.data
        }
      }, {
        type: 'get'
      });
    },
    feedback(resourceId) {
      sa.showModel('意见反馈', () => import('@/views/scs/apply/feedback'), {
        item: {
          resourceId: resourceId
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.board-url__panel {
  @include flex-start;
  @include clearfix;
  height: 100%;
  gap: 20px;
  cursor: pointer;

  width: 100%;
  padding: 8px;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border-radius: 8px;
  transition:
    transform var(--ad-transition),
    box-shadow var(--ad-transition),
    background var(--ad-transition);
  will-change: transform, box-shadow;

  &:hover {
    background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
    box-shadow: var(--shadow-lg);
  }
}

.board-url__image {
  @include flex-center;
  flex-direction: column;
  width: 30%;
  height: 100%;
  border-radius: var(--radius-lg);
  padding: 0;
  position: relative;
  gap: 20px;
}

.svg-icon {
  @include flex-center;
  width: var(--text-xl);
  height: var(--text-xl);
  min-width: var(--text-md);
  min-height: var(--text-md);
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  gap: 6px;
  fill: currentColor;

  &:hover {
    transform: scale(1.2);
  }
}

.board-url__eye {
  @include flex-center;
  gap: 6px;
}

.board-url__collect {
  @include flex-center;
  width: 100%;
  border-radius: var(--radius-md);
  gap: 16px;

  @keyframes pulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }
}

.el-image {
  @include flex-center;
  border-radius: var(--radius-lg);
  position: relative;
  width: 100%;
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;

  &:hover {
    transform: scale(1.05);
  }
}

.board-url__content {
  @include flex-column;
  width: 70%;
  height: 100%;
  min-height: 180px;
  max-height: 360px;
  gap: 8px;
  position: relative;
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;

  @media (max-width: 768px) {
    width: 100%;
    gap: 6px;
    padding: 6px;
    min-height: 120px;
    max-height: 240px;
  }
}

.board-url__meta {
  @include flex-start;
  color: var(--primary-700);
  width: 100%;
  gap: 8px;

  span {
    @include flex-center;
  }
}

.board-url__title {
  display: block;
  font-size: var(--text-xl);
  font-weight: bold;
  color: var(--primary-600);
  width: 100%;
  min-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
  position: relative;
  padding: 2px;

  @media (max-width: 768px) {
    font-size: var(--text-lg);
    max-width: 200px;
  }
}

.board-url__description {
  display: flex;
  flex-direction: column;
  text-indent: 1em;
  text-align: start;
  gap: 4px;

  .board-url__note {
    letter-spacing: 1px;
    line-height: 1.6;
  }
}

.board-url__tags {
  display: flex;
  align-items: center;
  color: var(--primary-700);
  gap: 8px;
  margin: 6px 0px;
}

.board-url__actions {
  @include flex-center;
  width: 100%;
  gap: 16px;
}

.board-url__action {
  @include flex-center;
  width: 120px;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  transition: all 0.2s ease;
  gap: 6px;
  padding: 6px 0;

  &>* {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  &:hover {
    color: #ffffff;
    background-color: var(--primary-900);

    .board-url__action-text {
      transform: translateX(-8px);
      transition: transform 0.5s ease;
    }

    .svg-icon {
      transform: translateX(8px);
      transition: transform 0.5s ease;
    }
  }
}

.board-url__action-text {
  font-size: var(--text-lg);
  font-weight: 600;
}

.board-url__feedback {
  color: red;
}

.board-url__star--active {
  color: #ffe100;
}
</style>
